import React, { useState, useRef,useEffect } from 'react';
import { View } from '@tarojs/components';
import { PullToRefresh, VirtualList, InfiniteScroll, NavBar, Image, Button } from '@antmjs/vantui';
import Taro,{getMenuButtonBoundingClientRect} from '@tarojs/taro';
import { getUserInfo,diffTime } from '../../../../utils/const'
import { getInvitelog } from '../../../../https/home';
import './index.scss'

export default function InviterList() {
    const btn = getMenuButtonBoundingClientRect();
    const [data, setData] = useState([]);
    const virtualListRef = useRef();

    useEffect(()=>{
        getList()
    },[])

    const getList = ()=>{
        Taro.showLoading({ title: '加载中' })
        getInvitelog({userId:getUserInfo()?.user_id}).then((res) => {
            Taro.hideLoading()
            if (res.success) {
               setData(res?.data||[])
            }
        })
    }

    function getRandomColor() {
        let color = "#";
        const characters = "0123456789ABCDEF";
        do {
            for (let i = 0; i < 6; i++) {
                color += characters[Math.floor(Math.random() * 16)];
            }
        } while (color === "#FFFFFF"); // 确保颜色不等于白色
        return `${color}99`; // 在颜色后面添加透明度值，0.6的透明度对应十六进制的99
    }
    

    return (
        <View className='mycoins-frame-view'>
            <NavBar title='我的小伙伴' leftArrow leftText={'返回'} onClickLeft={() => Taro.navigateBack()} fixed/>
            <View style={{paddingTop:btn.bottom+20}}>
            <PullToRefresh >
                <VirtualList
                    style={{ padding: 10, boxSizing: 'border-box' }}
                    height="calc(100vh - 135px)"
                    dataSource={data}
                    showCount={3}
                    ref={virtualListRef}
                    ItemRender={({ item,index}) => {
                        return (
                            <View className='list-bg-view'>
                                <View className='index-tit' style={{color:getRandomColor()}}>{index+1}</View>
                                <View className='img'>
                                    <Image src={item?.avatar||'https://img.yzcdn.cn/vant/cat.jpeg'} radius={'50%'} width={100} height={100} />
                                </View>
                                <View className='info-text'>
                                    <View>
                                        {item?.nickname||''}
                                    </View>
                                    <View className='update-title'>{item?.create_time ?`${ diffTime(new Date(item?.create_time).getTime())}邀请` : '未知'}</View>
                                </View>
                            </View>
                        );
                    }}
                />
            </PullToRefresh>
            </View>
        </View>
    );
}